<template>
  <div class="news-layout">
    <div class="news-box">
      <div class="news-Left">
        <p class="title">我的消息</p>
        <ul class="news-item-box">
          <router-link
            :to="{ name: 'News', query: { type: 1, id: $route.query.id } }"
            :class="{ 'yes-item': $route.query.type == 1 }"
          >
            <i class="news-icon icon-one"></i> 我的
          </router-link>
          <router-link
            :to="{ name: 'News', query: { type: 2, id: $route.query.id } }"
            :class="{ 'yes-item': $route.query.type == 2 }"
          >
            <i class="news-icon icon-two"></i> 私信
          </router-link>
          <router-link
            :to="{ name: 'News', query: { type: 3, id: $route.query.id } }"
            :class="{ 'yes-item': $route.query.type == 3 }"
          >
            <i class="news-icon icon-three"></i> 评论
          </router-link>
          <router-link
            :to="{ name: 'News', query: { type: 4, id: $route.query.id } }"
            :class="{ 'yes-item': $route.query.type == 4 }"
          >
            <i class="news-icon icon-four"></i> 通知
          </router-link>
        </ul>
      </div>
      <div class="news-Right">
        <My v-show="$route.query.type == 1" />
        <PrivateLetter v-show="$route.query.type == 2" />
        <Comment v-show="$route.query.type == 3" />
        <Notice v-show="$route.query.type == 4" />
      </div>
    </div>
  </div>
</template>

<script>
import My from "@/views/News/my.vue";
import Comment from "@/views/News/comment.vue";
import Notice from "@/views/News/notice.vue";
import PrivateLetter from "@/views/News/privateLetter.vue";
export default {
  components: { My, PrivateLetter, Notice, Comment },
};
</script>

<style lang="scss" scoped>
.news-layout {
  width: 100%;
  background: #f5f5f5;
  .news-box {
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;
    display: flex;
    .news-Left {
      width: 184px;
      border-right: 1px solid #d3d3d3;
      box-sizing: content-box;
      .title {
        height: 30px;
        padding: 32px 0 14px 40px;
        font-size: 20px;
        font-weight: normal;
        line-height: 30px;
      }
      .news-item-box {
        a {
          display: inline-block;
          color: #000;
          height: 53px;
          padding-left: 40px;
          background: #f7f7f7;
          box-sizing: border-box;
          width: 100%;
          border-bottom: 1px solid #ddd;
          line-height: 53px;
          .news-icon {
            display: inline-block;
            width: 22px;
            height: 21px;
            vertical-align: middle;
            background: url("./../../assets/imges/btnIconTwo.png") no-repeat;
            &.icon-one {
              background-position: -64px -164px;
            }
            &.icon-two {
              background-position: -64px -193px;
            }
            &.icon-three {
              background-position: -64px -245px;
            }
            &.icon-four {
              background-position: -58px -400px;
            }
          }
          &:nth-child(1) {
            border-top: 1px solid #ddd;
          }
          &:hover {
            background: #fff;
            border-right: 1px solid #fff;
          }
          &.yes-item {
            background: #fff;
            border-right: 1px solid #fff;
            transform: translateX(1px);
          }
        }
      }
    }
    .news-Right {
      flex: 1;
      padding: 40px;
      box-sizing: border-box;
      overflow: hidden;
    }
  }
}
</style>